/*
 * @Descripttion: donglyc
 * @version:
 * @Author: donglyc
 * @Date: 2021-01-05 14:11:03
 * @LastEditors: donglyc
 * @LastEditTime: 2021-02-08 11:13:21
 */
import { downloadWorksFile, getdownLoadUrl } from '@/services/file';
import { downloadFileFromResponse } from '@/utils/request';
import { Image, Row, Col } from 'antd';
import React from 'react';

const Cart: React.FC<any> = props => {
  // printingAnnotations={printingAnnotations}
  // sideStyleAnnotations={sideStyleAnnotations}
  const { title, content, filedata, btn, printingAnnotations, sideStyleAnnotations } = props;

  /**
   * 下载
   */
  const listDown = () => {
    if (filedata[0]?.workId) downloadWorksFile(filedata[0]?.workId).then((res: any) => downloadFileFromResponse(res));
  };

  return (
    <div className="out_img">
      <div className="title_list">
        <div className="title">{title}</div>
        <div className="title">{content}</div>
        <div className="down" onClick={listDown}>
          {btn}
        </div>
      </div>
      <div className="img_list">
        <Image.PreviewGroup>
          {filedata?.map((el: any, idx: number) => {
            return (
              <Row gutter={24} style={{ height: 'auto', marginTop: '25px' }} key={`file-${idx}`}>
                {idx === 0 && (
                  <Col span={24}>
                    <div style={{ textAlign: 'center' }}>{printingAnnotations}</div>
                  </Col>
                )}
                {idx === 1 && (
                  <Col span={24}>
                    {sideStyleAnnotations.map((text: string, index: number) => {
                      return (
                        <div key={`sideStyleAnnotations-${index}`} style={{ textAlign: 'center' }}>
                          {text}
                        </div>
                      );
                    })}
                  </Col>
                )}
                <Col span={24}>
                  <Image src={el?.pictureId ? getdownLoadUrl(el?.pictureId) : ''} />
                </Col>
              </Row>
            );
          })}
        </Image.PreviewGroup>
      </div>
    </div>
  );
};

export default Cart;
